<template>
    <template v-if="listOptions.hasHeader">
        <div class="no-list-headers">
            <div
                v-for="(headerItem, index) in listOptions.columns"
                :key="headerItem.prop"
                :data-header="index"
                class="no-list-header"
                :style="{
                    width: headerItem.width,
                    minWidth: headerItem.minWidth,
                    maxWidth: headerItem.maxWidth,
                }"
            >
                {{ headerItem.label }}
            </div>
        </div>
    </template>
    <div
        ref="noListRef"
        class="no-list"
        @mouseenter="onmouseover"
        @mouseleave="onmouseout"
    >
        <!-- @scroll="scroll" -->
        <div class="no-list-bg" :style="{ height: listTrueHeight }"></div>
        <div ref="scrollRef" class="no-list-box">
            <div ref="noListContentRef" class="no-list-content">
                <div
                    v-for="(item, index) in data"
                    :key="'item-' + index"
                    :data-index="index"
                    class="no-list-row"
                    @click="clickItem(index)"
                >
                    <div
                        v-for="(columnItem, index) in listOptions.columns"
                        :key="columnItem.prop"
                        :data-column="index"
                        class="no-list-column"
                        :style="{
                            width: columnItem.width,
                            minWidth: columnItem.minWidth,
                            maxWidth: columnItem.maxWidth,
                        }"
                    >
                        <template v-if="columnItem.render">
                            <RenderCom
                                :renderFun="columnItem.render"
                                :data="item"
                            />
                        </template>
                        <template v-else-if="columnItem.formmat">{{
                            columnItem.formmat(item[columnItem.prop], item)
                        }}</template>
                        <template v-else>{{ item[columnItem.prop] }}</template>
                    </div>
                </div>
            </div>
            <div
                class="no-list-content no-list-virtually"
                v-html="copyHtml"
                @click="clickCopy"
            ></div>
        </div>
    </div>
</template>
<script setup lang="tsx">
import { onBeforeMount, onMounted, ref, computed, readonly } from 'vue'
import RenderCom from '@/components/RenderBox/index.vue'

type columnItem = {
    label: string
    prop: string
    width: string
    minWidth: string
    maxWidth: string
    render?: Function
    formmat?: Function
}
const isDev = process.env.NODE_ENV === 'development'
const sessionSpeedKey = 'DEV-LIST-LAST-SPEED'
//   列表的默认配置项
const defaultOptions = {
    hasHeader: true,
    columns: [],
}

const props = defineProps({
    // 1s的速度
    speed: { type: Number, default: 80 },
    //   数据列表
    data: { type: readonly<Array<any>>, default: () => [] },
    //   列表的配置项
    options: { type: Object, default: () => {} },
})

const copyHtml = ref<string>('')
const listHeight = ref(100)
const frameFun = ref()
const noListRef = ref<HTMLDivElement>()
const scrollRef = ref(null)
const noListContentRef = ref<HTMLDivElement | null>(null)
const secondFrame = ref(0)
const lastFrame = ref(0)
const listTrueHeight = computed(() => {
    const listTrueHeight = (noListContentRef.value?.clientHeight || 0) + 'px'
    console.log('listTrueHeight: ', listTrueHeight)
    return listTrueHeight
})
const listOptions = computed<{
    hasHeader: boolean
    columns: columnItem[]
}>(() => {
    return Object.assign(defaultOptions, props.options)
})
const frameSpeed = computed(() => {
    const speed = secondFrame.value
        ? (props.speed * secondFrame.value) / 1000
        : 0.45
    return speed
})
onMounted(() => {
    console.log('scrollRef', scrollRef)
    console.log('isDev', isDev)
    if (isDev) {
        const speed = sessionStorage.getItem(sessionSpeedKey)
        if (speed) secondFrame.value = parseInt(speed)
        console.log('mounted', speed)
    }
    copyHtml.value = noListContentRef.value?.innerHTML || copyHtml.value
    listHeight.value = noListContentRef.value?.offsetHeight || listHeight.value
    onScrollTop(0)
})
onBeforeMount(() => {
    if (isDev) {
        sessionStorage.setItem(sessionSpeedKey, secondFrame.value.toString())
    }
    cancelAnimationFrame(frameFun.value)
})
const onScrollTop = (time: number, is: Boolean = false) => {
    try {
        // 用前一秒统计出帧率
        if (time !== 0 && time < 1000) {
            secondFrame.value = time - lastFrame.value
            lastFrame.value = time
        }
        //   scrollTop.value += frameSpeed.value
        //   if (scrollTop.value >= listHeight.value) scrollTop.value = 0
        noListRef.value?.scrollTo(
            noListRef.value.scrollLeft,
            noListRef.value.scrollTop + frameSpeed.value
        )
        if ((noListRef.value?.scrollTop || 0) >= listHeight.value)
            noListRef.value?.scrollTo(noListRef.value.scrollLeft, 0)
        if (is) console.log('onScrollTop', time, noListRef, listHeight)
        frameFun.value = requestAnimationFrame(onScrollTop)
    } catch (error) {
        console.log(error)
    }
}
const onmouseover = (e: MouseEvent) => {
    console.log('onmouseover', e)
    cancelAnimationFrame(frameFun.value)
}
const onmouseout = (e: MouseEvent) => {
    console.log('onmouseout', e)

    onScrollTop(0, true)
}
const clickItem = (index: number) => {
    console.log('clickItem', index)
}
const clickCopy = (e: MouseEvent) => {
    const index = (e.target as HTMLDivElement)?.dataset?.index
    if(index) clickItem(parseInt(index))
}
/* const scroll = (e: MouseEvent) => {
  console.log('scroll', e)
} */
</script>
<style lang="scss" scoped>
.no-list {
    height: 400px;
    //   overflow-y: hidden;
    overflow-y: auto;
    position: relative;
    background-color: rgba(0, 0, 0, 0.1);
    .no-list-box {
        width: 100%;
        position: absolute;
        top: 0;
        .no-list-content {
            width: 100%;
            //   position: absolute;
            top: 0;
            .no-list-row {
                display: flex;
                cursor: pointer;
                .no-list-column {
                    flex: auto;
                }
            }
        }
        // .no-list-virtually {
        //   width: 100%;
        //   //   position: absolute;
        //   &:nth-of-type(1) {
        //     top: -100%;
        //     // transform: translateY(-100%);
        //   }
        //   &:last-of-type {
        //     top: 100%;
        //     // transform: translateY(100%);
        //   }
        // }
    }
}

.no-list-headers {
    display: flex;
    .no-list-header {
        flex: auto;
    }
}
</style>
